<template>
  <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <g :transform="`rotate(${config.rotate} ${config.x1} ${config.y1})`">
      <line :stroke-dasharray="[config.width,config.interval].join(',')" :x1="config.x1" :y1="config.y1" :x2="config.x2" :y2="config.y2" :stroke="config.color" :stroke-width="config.height"></line>
      <rect :width="config.width" :height="config.height"  :x="config.x1" :y="config.y1-config.height/2"  :fill="config.fill" :transform="`rotate(${Math.atan2(config.y2 - config.y1, config.x2 - config.x1)})`">
        <animateMotion :path="`M0 0 L${config.x2-config.x1-config.width} ${config.y2-config.y1}`" :dur="`${config.dur}s`"  repeatCount = "indefinite"></animateMotion>
      </rect>
    </g>

  </svg>
</template>

<script>
export default {
  name: "connectSvg",
  props:{
    config:{
      default:()=>{
        return {
          "x1": 200,
          "y1": 195,
          "x2": 350,
          "y2": 195,
          "rotate": 0,
          "width": 15,
          "height": 10,
          "interval": 5,
          "color": "gray",
          "fill": "red",
          "dur": 10
        }
      }
    }
  }
}
</script>

<style scoped>

</style>